<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
			<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
			
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">公司信息</h2>
				<el-button type="info" size="small" class="lahei-btn" @click="onAddShield" v-if="company.is_black==1">拉黑</el-button>
				<div class="lahei-btn" v-else>已拉黑</div>
				<section class="flexed">
					<div class="lietou-msg">
						<img :src="company.c_logo=='0'?require(`@/assets/images/mine_default_img.png`):company.c_logo"  class="avatar"/>
						<div class="lietou-msg-right">
							<p>公司：{{company.cname}}</p>
							<p>规模：{{company.guimo}}</p>
						</div>
					</div>
					<div class="lietou-number lietou-msg-right">
						<p>注册时间：{{company.create_time}}</p>
						<p>注册人： {{company.realname}}</p>
						<p>注册人职位： {{company.company_title}}</p>
					</div>
				</section>
			</div>
			<!-- 账户信息 -->
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">公司简介</h2>
				<div class="acount">
					{{company.c_content}}
				</div>
			</div>
			<!-- 猎聘记录 -->
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">营业执照</h2>
				<img :src="company.c_zhizhao"  class="company-img" v-if="company.c_zhizhao!='0'"/>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Breadcrumb from '@/components/Breadcrumb'
	export default {
		name: 'CompanyDetail',
		components:{
			Breadcrumb
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			return {
				company: {},
				detailId: ''
			}
		},
		async created() {
			this.detailId = this.$route.query.id;
			this.loadData();
		},
		methods:{
			async loadData() {
			  const loading = this.$loading({
				 lock: true,
				 text: 'Loading',
				 spinner: 'el-icon-loading',
				 background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
				let data = {
				   "token": this.token,
				   "id": this.detailId
				 }
				 let res = await this.$http({
				   url: '/man/Company/getInfo',
				   method: 'post',
				   params: data
				 });
				 if(res.data.guimo.indexOf('人')==-1){
					 res.data.guimo = res.data.guimo +'人';
				 }
				 this.company = res.data;
				 loading.close();
			  } catch (e) {
				 console.log(e)
				 loading.close();
			  }
			},
			// 加入黑名单
			onAddShield() {
				this.$confirm('确定将此用工公司加入黑名单?', '操作确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.laheiHandle();
				}).catch(() => {
					
				});
			},
			// 拉黑操作
			async laheiHandle(){
				try {
					let res = await this.$http({
						url: '/man/Company/setBlack',
						method: 'post',
						params: {
							"token": this.token,
							"id": this.detailId,
							"is_black": -1, //是	是否拉黑 1 取消拉黑 -1 拉黑	-1
							"black_reason":'' //	是	拉黑原因
						}
					});
					this.$message({
						type: 'success',
						message: '已加入黑名单!'
					});
					this.$set( this.company, 'is_black', '-1');
				} catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lietou-detail{
		// background-color: #f4f4f4;
		background-color: rgb(240, 242, 245);
		position: relative;
		
		.detail-bg {
		  position: fixed;
		  top: 0px;
		  left: 0;
		  bottom:0;
		  right: 0;
		  background: #f4f4f4;
		}
		
	}
	.lietou-detail-head{
		background-color: #fff;
		margin:0 0 20px 0px;
		padding-bottom:25px;
		position: relative;
		min-width:800px;
		
		.lietou-detail-h1{
			font-size:18px;
			font-weight: bold;
			padding:20px 16px 8px;
		}
		.lietou-number{
			border-left:1px #ddd solid;
			padding-left:30px;
		}
		.lietou-msg{
			display: flex;
			margin-left:30px;
			margin-top:12px;
			.avatar{
				width:80px;
				height:80px;
				border-radius: 50%;
			}
		}
		.lietou-msg-right{
			margin-left:34px;
			font-size:16px;
			p{
				line-height: 35px;
				margin:0;
			}
		}
		.lahei-btn{
			position: absolute;
			right:30px;
			top:25px;
		}
		.acount{
			margin:0 30px 20px;
			line-height: 32px;
			
			span{
				margin-right:50px;
			}
		}
		.company-img{
			width:200px;
			margin-left:30px;
		}
	}
</style>
<style>
	.el-message{
		top:120px !important;
	}
</style>
